<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>LiWE: OS3 JS Lib / Form</title>
<link rel="stylesheet" href="docs.css" type="text/css" />
<script type="text/javascript" language="javascript" src="docs.js"></script>
</head>
<body onload="docs.init()">

<div id="title">
LiWE: <a href="index.html">OS3 JS Lib</a> / Form
</div>

<div id="leftbar">
</div>

<div id="main">
	<!-- {{{ Introduction -->
	<div class="block">
		<a name="form_intro" title="Introduction"/>
		<div class="title">
			Introduction
		</div>

		<div class="text">
			laskd adj alk jdlak jdlka jdkla jdkl ajkdl jakld jlka jdlka jdlka jdkla jdlk ajkld jalk djla dla djklajsdklajsdklajsd lkasjd
			kasdj sakdj aksd jkas djka jdka jdka jdka jdka jdk ajkd jaksd jaks djkasdj kadj kasjdkajdkajdkasjdka djka jdkajd
			adoaidoa dioaidoa doa idoa idoai lad lakj dlkajd laskj dlaskjd lkasjd lksaj dlkas jdlkajsd
			aosdia sod asodi asod akljd jkash duqd jqkdh qkjdhusdh akjsdajkshduasd hkajsdhsajkdh uas dkashdjakshdua hkjahd jsadh uas
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ Standard Attributes -->
	<div class="block">
		<a name="form_attrs" title="Standard Attributes"/>
		<div class="title">
			Standard attributes
		</div>

		<div class="text">
			Here, you'll find the list of <em>standard attributes</em> that can be passed to any <tt>Form</tt> method when you are creating <tt>Form</tt> widgets.

			<table border="0" class="form_attributes">
			<tr>
				<th>Name</th>
				<th>Description</th>
				<th>Notes</th>
			</tr>
			<tr>
				<td class="name" valign="top">akey</td>
				<td class="descr" valign="top">
					This attribute define the <em>accelerator key</em>, the character the user can press (along with the <tt>ALT</tt> key) to give
					focus to an input field. <br />
					By setting this attribute, if your <tt>label</tt> attribute contains at least one char equals to the <em>accelerator key</em>, then that
					char will be rendered underlined and with a different color, to give the user an hint about the presence of the <em>accelerator key</em>.
					If the label is not present or the <em>accelerator key</em> is not part of the label, the <em>accelerator key</em> will be shown as the last
					part of the <tt>label</tt> between brackets.
				</td>
				<td class="note" valign="top">
					The <em>accelerator key</em> does not work with all input fields.
				</td>
			</tr>
			<tr>
				<td class="name" valign="top">checked</td>
				<td class="descr" valign="top">
					This is a <tt>true</tt>/<tt>false</tt> attribute. By setting this to <tt>true</tt> you will set the checkbox in the <em>checked</em> state.
				</td>
				<td class="note" valign="top">Works only with checkboxes. See <a href="#form_checkbox">checkbox()</a>.</td>
			</tr>
			<tr>
				<td class="name" valign="top">defval</td>
				<td class="descr" valign="top">
					With this attribute you can define the <em>default value</em> of an input field. This value will be used only if the current
					input field does not have the <tt>value</tt> attribute already set.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			<tr>
				<td class="name" valign="top">filter</td>
				<td class="descr" valign="top">
					You can allow the user to insert just a <em>predefined subset of chars</em> inside an input field.
					For example, the <a href="form_number">number()</a> method allows the user just to input number chars and not
					alphabetical ones.<br />
					To define your own subset of characters, use the <tt>filter</tt> attribute, passing a string containing the characters you
					want the user to be able to insert.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			<tr>
				<td class="name" valign="top">hint</td>
				<td class="descr" valign="top">
					This is a reference to an existing HTML file that will be shown when the user clicks on the <em>hint</em> icon
					on the right of the input field.
				</td>
				<td class="note" valign="top">
					This attribute does not work in this version of <tt>form.js</tt>.
				</td>
			</tr>
			<tr>
				<td class="name" valign="top">label</td>
				<td class="descr" valign="top">This is the label that will appear on the left of the field. The text that will be prompted
						  to the user before the input field.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			<tr>
				<td class="name" valign="top">mandatory</td>
				<td class="descr" valign="top">
					This is a <tt>true</tt>/<tt>false</tt> attribute. If it is set to <tt>true</tt>, the field <strong>must be filled</strong>
					by the user before the <tt>Form</tt> is submitted. On mandatory fields, a small <em>mandatory icon</em> (<img src="../gfx/form/mandatory.gif" alt="Mandatory field" />)
					is shown on the right of the input field and during form submission, when the field is checked, the icon may change to <img src="../gfx/form/ok.gif" alt="OK" /> if the
					field is valid and to <img src="../gfx/form/error.gif" alt="error" /> if the field has been left empty.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			<tr>
				<td class="name" valign="top">nonl</td>
				<td class="descr" valign="top">
					This is a <tt>true</tt>/<tt>false</tt> attribute. By default, the <tt>Form</tt> layout would go to a <em>new line</em> at every input field inserted.
					If you want an input field not to <em>new line</em> the form, set the <tt>nonl</tt> attribute to true.<br />
					For example, the <a href="#form_calendar">calendar()</a> method uses this attribute to line up the three input fields for the date.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			<tr>
				<td class="name" valign="top">validator</td>
				<td class="descr" valign="top">
					This attribute can be set to <tt>true</tt> or to a <em>function callback</em> that will be called to validate the user input before data is submitted.<br />
					If you set the <tt>validator</tt> field to <tt>true</tt>, then the <em>default</em> validator for that field will be used (if exists). For example, in a
					<a href="#form_number">number()</a> field, the default validator is the function <tt>check_integer()</tt> defined inside the <tt>form_validations.js</tt> file.
				</td>
				<td class="note" valign="top">&nbsp;</td>
			</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ Form ( name [, action [, no_table ] ] ) - Form class constructor -->
	<div class="block">
		<a name="form_constructor" title="Form()"/>
		<div class="title">
			Form() constructor
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">Form ( name [, action [, no_table ] ] )</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">Object = Form ( name, [ action, [ no_table ] ] )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This is the <tt>Form</tt> constructor. This is the first method that <strong>must</strong> be called before
						calling anything else. <br />
						The <tt>name</tt> parameter is the <tt>Form</tt> name. <strong>It must be unique on the web page</strong>.
						The <tt>action</tt> and <tt>no_table</tt> params are optional.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>name</tt> - (<tt>string</tt>) This is the <tt>Form</tt> name. <strong>It must be unique on the web page</strong>.</li>
							<li><tt>action</tt> - (<tt>string</tt>) The action that must be performed when the user clicks the <em>submit</em> button.
								By default, the <tt>action</tt> for <em>AJAX</em> forms is <tt>/ajax.php</tt>. For <em>multipart</em> (POST)
								forms, the default is <tt>/post.php</tt>.
							</li>
							<li><tt>no_table</tt> - (<tt>boolean</tt>)  By default, the <tt>Form</tt> class renders its widgets inside an HTML Table.
								If you prefer a different, simpler, layout, set <tt>no_table</tt> to <tt>true</tt>.
							</li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						If everything goes well, a valid <tt>Form</tt> instance is returned.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ button ( attrs ) -->
	<div class="block">
		<a name="form_button" title="Form::button()"/>
		<div class="title">
			Form::button()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">button()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void button ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a standard <em>button</em> to the Form. 
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ calendar ( attrs ) -->
	<div class="block">
		<a name="form_calendar" title="Form::calendar()"/>
		<div class="title">
			Form::calendar()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">calendar()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">OS3Calendar calendar ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
				<td class="descr">
						This method adds a <em>calendar</em> input field to the Form. This is a three input boxes composite input field (for year, month and day respectively)
						plus a <em>pop up</em> calendar widget that can be triggered by the user by pressing the <img src="../gfx/icons/calendar.png" alt="calendar" /> calendar icon.
						<br />
						<div class="note">In order for this widget to work properely, you must include <tt>OS3Calendar</tt> (JavaScript and css) inside your HTML Page.</div>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						A valid instance of an <tt>OS3Calendar</tt> class.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ checkbox ( attrs ) -->
	<div class="block">
		<a name="form_checkbox" title="Form::checkbox()"/>
		<div class="title">
			Form::checkbox()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">checkbox()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void checkbox ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>checkbox</em> input field to the Form. 
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ clear () -->
	<div class="block">
		<a name="form_clear" title="Form::clear()"/>
		<div class="title">
			Form::clear()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">clear()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void clear ()</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method empties all <tt>form</tt> fields.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						NONE
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ email ( attrs ) -->
	<div class="block">
		<a name="form_email" title="Form::email()"/>
		<div class="title">
			Form::email()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">email()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void email ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds an <em>email</em> input field to the Form. This is a standard <em>text</em> field with some limitations
						to the characters the user can insert into it. It also provides a <em>validation function</em> that can be triggered with
						the <tt>validation: true</tt> tag.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ get () -->
	<div class="block">
		<a name="form_get" title="Form::get()" />
		<div class="title">
			Form::get()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">get()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">String get ()</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method generates the needed HTML code to render the <tt>Form</tt> currently in memory,
						and returns the <tt>String</tt>.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						NONE
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						A valid <tt>String</tt> containing the HTML code to generate the <tt>Form</tt>.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ get_value () -->
	<div class="block">
		<a name="form_get_value" title="Form::get_value()" />
		<div class="title">
			Form::get_value()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">get_value()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">String get_value ( widget_name )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method returns the value contained by a widget inside the <tt>Form</tt>.<br />
						<tt>widget_name</tt> is the name of the widget (the name that has been assigned to the widget using the
						<tt>name</tt> attribute in the <tt>attrs</tt> object).<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>widget_name</tt> - (<tt>String</tt>) The name of the wiget you want to get the value from.</li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						A valid <tt>String</tt> containing the HTML code to generate the <tt>Form</tt>.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ get_values () -->
	<div class="block">
		<a name="form_get_values" title="Form::get_values()" />
		<div class="title">
			Form::get_values()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">get_values()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">array get_values ()</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method returns an array of <tt>keys</tt> / <tt>values</tt> of the current <tt>Form</tt> fields.<br />
						Use this method to gather all user-filled data from a <tt>Form</tt>.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						NONE
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						An associative array of <tt>key</tt>/<tt>value</tt> pairs of the curent <tt>Form</tt> fields.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ get_element () -->
	<div class="block">
		<a name="form_get_element" title="Form::get_element()" />
		<div class="title">
			Form::get_element()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">get_element()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">HTMLElement get_element ( widget_name )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method returns the HTML Input Element of the widget inside the <tt>Form</tt>.<br />
						<tt>widget_name</tt> is the name of the widget (the name that has been assigned to the widget using the
						<tt>name</tt> attribute in the <tt>attrs</tt> object).<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>widget_name</tt> - (<tt>String</tt>) The name of the wiget you want to get the value from.</li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						A valid <tt>HTMLElement</tt> of the input element inside the <tt>Form</tt> or <tt>null</tt> if the element does not exists.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ grid ( attrs ) -->
	<div class="block">
		<a name="form_grid" title="Form::grid()" />
		<div class="title">
			Form::grid()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">grid()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">OS3Grid grid ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds an <tt>OS3Grid</tt> to the <tt>Form</tt>.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						A valid <tt>OS3Grid</tt> instance object.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ hidden ( attrs ) -->
	<div class="block">
		<a name="form_hidden" title="Form::hidden()"/>
		<div class="title">
			Form::hidden()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">hidden()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void hidden ( attrs )<br />void hidden ( name, value )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds an <em>hidden</em> field to the Form. This method can be called in two different ways:
						the first one is the <em>"standard"</em> one: by setting both <tt>name</tt> and <tt>value</tt> attributes 
						inside the <tt>attrs</tt> object; the second one is a <em>shortcut</em>, a commodity version, where you can
						directly pass the <tt>name</tt> and <tt>value</tt> as two different params.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
							<li><tt>name</tt> - (<tt>String</tt>) the name of the hidden field.</li>
							<li><tt>value</tt> - (<tt>String</tt>) the value of the hidden field.</li>
						
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ label ( attrs ) -->
	<div class="block">
		<a name="form_label" title="Form::label()" />
		<div class="title">
			Form::label()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">label()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void label ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a read only text field. The text contained in the <tt>label</tt> field is not editable and it is <strong>not</strong>
						rendered as a <tt>text input</tt> field.<br />
						To set the <tt>label</tt> text, use the <tt>value</tt> attribute of the <tt>attrs</tt> object. 
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ number ( attrs ) -->
	<div class="block">
		<a name="form_number" title="Form::number()"/>
		<div class="title">
			Form::number()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">number()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void number ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>number</em> input field to the Form. This is a standard <em>text</em> field with some limitations
						to the characters the user can insert into it. It also provides a <em>validation function</em> that can be triggered with
						the <tt>validation: true</tt> tag.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ password ( attrs ) -->
	<div class="block">
		<a name="form_password" title="Form::password()"/>
		<div class="title">
			Form::password()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">password()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void password ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>password</em> input field to the Form. <br />
						The text inserted by the user will not be shown and some <em>*</em> chars will be echoed back as feedback.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ select ( attrs ) -->
	<div class="block">
		<a name="form_select" title="Form::select()"/>
		<div class="title">
			Form::select()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">select()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void select ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>select</em> input field to the <tt>Form</tt>.<br />
						The <em>select</em> input field can be rendered both as a dropdown list (by setting the <tt>size</tt> attribute to <tt>1</tt>), 
						or as a <em>select box</em>, by setting the <tt>size</tt> attribute to a value greater than <tt>1</tt>.
						You can set the button label by using the <tt>value</tt> attribute in the <tt>attrs</tt> object.

					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>

						Here there is a list of <tt>select</tt> only attributes:
						<table border="0" class="form_attributes">
						<tr>
							<th>Name</th>
							<th>Description</th>
							<th>Notes</th>
						</tr>
						<tr>
							<td class="name" valign="top">force_select</td>
							<td class="descr" valign="top">
								This is a <tt>boolean</tt> attribute. If it is set to <tt>true</tt> the first item of the <em>select list</em> will be
								automatically generated with the <em>(Select)</em> text in it.
							</td>
							<td class="note" valign="top">This element has <strong>no</strong> value.</td>
						</tr>
						<tr>
							<td class="name" valign="top">options</td>
							<td class="descr" valign="top">
								This attribute defines the list of <em>options</em> the <em>select box</em> will show. The list must be defined as a list of
								objects with the following attributes (some are optional):
								<ul>
									<li><tt>label</tt> - (<tt>String</tt>) The label to appear in the <em>select list</em>.</li>
									<li><tt>value</tt> - (<tt>String / Integer</tt>) The value to bind to the <tt>label</tt> in the <em>select list</em>.</li>
									<li><tt>selected</tt> - (<tt>Boolean</tt>) [<strong>Optional</strong>] If this attribute is set to <tt>true</tt>, this element will be
												selected inside the <em>select box</em>.</li>
									<li><tt>class</tt> - (<tt>String</tt>) [<strong>Optional</strong>] The name of the stylesheet to use to render this element 
												inside the <em>select list</em></li> 
								</ul>
							</td>
							<td class="note" valign="top">Here there is an example of valid <tt>options</tt> list:
<pre>
var opts = [
	{ label: "Item 1", value: 1 },
	{ label: "Item 2", value: 2 },
	{ label: "Item 3", value: 3 }
];
</pre>
							</td>
						</tr>
						</table>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ sep () -->
	<div class="block">
		<a name="form_sep" title="Form::sep()"/>
		<div class="title">
			Form::sep()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">sep()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void sep ()</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a separator line inside the <tt>Form</tt>, helping organizing the form visually.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						NONE
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ set () -->
	<div class="block">
		<a name="form_set" title="Form::set()" />
		<div class="title">
			Form::set()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">set()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void set ( target_id )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method renders the current <tt>Form</tt> inside the <tt>target_id</tt>.<br />
						<tt>target_id</tt> must be a valid HTML element id, capable of containing children, usually
						it is a <tt>div</tt> element.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>target_id</tt> - (<tt>String</tt>) The id of the HTML element on the page to render the <tt>Form</tt> in.</li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ set_value () -->
	<div class="block">
		<a name="form_set_value" title="Form::set_value()" />
		<div class="title">
			Form::set_value()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">set_value()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void set_value ( widget_name, value )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method sets the <tt>value</tt> field of the widget specified by <tt>widget_name</tt>
						inside the current <tt>Form</tt>.
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>widget_name</tt> - (<tt>String</tt>) The widget name you want to set the <tt>value</tt> to.</li>
							<li><tt>value</tt> - (<tt>String</tt>) The value to be assigned to the widget specified by <tt>widget_name</tt>.</li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ submit ( attrs ) -->
	<div class="block">
		<a name="form_submit" title="Form::submit()"/>
		<div class="title">
			Form::submit()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">submit()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void submit ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>submit</em> button to the <tt>Form</tt>.
						You can set the button label by using the <tt>value</tt> attribute in the <tt>attrs</tt> object.
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ text ( attrs ) -->
	<div class="block">
		<a name="form_text" title="Form::text()"/>
		<div class="title">
			Form::text()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">text()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void text ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>text</em> input field to the Form. 
						<br />
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ textarea ( attrs ) -->
	<div class="block">
		<a name="form_textarea" title="Form::textarea()"/>
		<div class="title">
			Form::textarea()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">textarea()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void textarea ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds a <em>textarea</em> input field to the Form. 
						<div class="note">
							Remember to use the attribute <tt>text</tt> to set a starting text to the <tt>textarea</tt> and not the
							<tt>value</tt> attribute.
						</div>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
						Here there is a list of <tt>textarea</tt> only attributes:
						<table border="0" class="form_attributes">
						<tr>
							<th>Name</th>
							<th>Description</th>
							<th>Notes</th>
						</tr>
						<tr>
							<td class="name" valign="top">code</td>
							<td class="descr" valign="top">
								This is a <tt>boolean</tt> attribute. If it is set to <tt>true</tt>
								text inside the textarea will be rendered in <tt>monospace / Courier</tt> font.
							</td>
							<td class="note" valign="top">This element has <strong>no</strong> value.</td>
						</tr>
						</table>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->
	<!-- {{{ upload ( attrs ) -->
	<div class="block">
		<a name="form_upload" title="Form::upload()"/>
		<div class="title">
			Form::upload()
		</div>

		<div class="text">
			<table class="function">
				<tr>
					<td class="name" valign="top">Name:</td>
					<td class="tt">upload()</td>
				</tr>
				<tr>
					<td class="name" valign="top">Synopsis:</td>
					<td class="tt">void upload ( attrs )</td>
				</tr>

				<tr>
					<td class="name" valign="top">Description:</td>
					<td class="descr">
						This method adds an <em>upload</em> field to the Form. An <em>upload</em> field is the standard field the user can interact with to
						send some files along with the form data.<br />
						<div class="note">
							This method <em>changes the POST action</em>. The form will be posted with a standart <strong>POST</strong> method and not with
							the usual <em>AJAX</em> mode. The action used with the post will be the one defined in <tt>post_mode</tt> attribute.
						</div>	
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Input:</td>
					<td class="descr">
						<ul>
							<li><tt>attrs</tt> - (<tt>Object</tt>) a list of standard attributes to set to the field. See <a href="#form_attrs">standard attributes</a></li>
						</ul>
					</td>
				</tr>

				<tr>
					<td class="name" valign="top">Returns:</td>
					<td class="descr">
						Nothing.
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- }}} -->


</div>


</body>
</html>
